<template>
  <!-- <base-layout :layout-config="layoutConfig"> -->
  <!--  <template #slotLayoutAppBar>
      头部区域
    </template> -->

  <!-- <template #slotLayoutMain> -->
  <v-container class="loginContainer pa-2">
    <v-card class="col-sm-8 col-md-4 col-8">
      <v-img class="white--text flex align-end" height="150px" src="@/assets/images/login.jpg"> </v-img>

      <v-card-title>登录</v-card-title>

      <v-form ref="form" v-model="valid" lazy-validation style="width: 90%;padding-bottom: 30px;">
        <v-text-field
          v-model="loginForm.username"
          :rules="rules.username"
          label="用户名"
          required
          @change="usernameChange"
        ></v-text-field>

        <v-text-field
          v-model="loginForm.password"
          :rules="rules.password"
          label="密码"
          required
          type="password"
          @change="pwdChange"
        ></v-text-field>

        <v-checkbox v-model="isRemember" label="记住密码" @change="remember"></v-checkbox>

        <v-btn color="success" style="width: 100%;" class="" @click="login">
          登录
        </v-btn>
      </v-form>
    </v-card>
  </v-container>
  <!-- </template> -->

  <!--  <template #slotLayoutFooterBar>
      底部区域
    </template> -->
  <!-- </base-layout> -->
</template>

<script>
// import BaseLayout from '@/components/BaseComponents/BaseLayout/index'
// import FormComponent from '@/components/BaseComponents/FormCompoent/FormComponent.vue'
// import ToggleLang from '@/components/i18N/ToggleLang.vue'
// import LangSelect from '@/components/LangSelect/LangSelect.vue'

import { isRequired } from 'utils/validate'
import { mapGetters } from 'vuex'
import { addDynamicRoutes } from '@/router/permission'
import {
  setUsername,
  setPassword,
  getUsername,
  getPassword,
  removeUsername,
  removePassword,
  setRemember,
  getRemember,
  removeRemember
} from '@/utils/storage'
import md5 from 'js-md5'
import { Base64 } from 'js-base64'
export default {
  // 登录页
  name: 'Login',

  components: {
    // BaseLayout
    // ToggleLang,
    // LangSelect
  },

  data() {
    return {
      valid: true,
      isRemember: false,
      /*   layoutConfig: {
         appBarConfig: { height: 120, color: '#eee', flat: true },
          footerBarConfig: { height: 60, color: '#eee', flat: true }
      }, */
      loginFormConfig: {
        formOptions: {
          fluid: false,
          class: 'text-center',
          formOperation: {
            cancelBtnShow: false,
            saveBtnShow: false,
            buttonList: [
              {
                title: this.$t('btn.login'),
                block: true,
                color: 'primary',
                method: 'login',
                class: 'loginBtn'
              }
            ]
          }
        },
        itemConfig: [
          {
            label: this.$t('views.login.login.username'),
            prop: 'username',
            type: 'text',
            rules: [isRequired],
            cols: 12,
            xlCol: 12
          },
          {
            label: this.$t('views.login.login.password'),
            prop: 'password',
            type: 'password',
            rules: [isRequired],
            cols: 12,
            xlCol: 12
          }
        ]
      },
      rules: {
        username: [isRequired],
        password: [isRequired]
      },
      loginForm: {},
      helloTest: 0
      // 当前屏幕宽
      // screenWidth: '',
      // 当前屏幕高
      // screenHeight: ''
    }
  },

  computed: {
    ...mapGetters(['isPC', 'screenWidth', 'screenHeight'])
  },

  watch: {
    screenWidth() {
      // 屏幕改变时重设置宽度
      this.setFormTitleWidth()
    }
  },

  created() {
    this.checkIsRemeber()
  },

  mounted() {
    // console.log(this.$message)
    // this.$message.success('success1111111111')
    // this.$message.success('success2')
    // this.screenWidth = document.body.clientWidth
    // this.screenHeight = document.body.clientHeight
    // window.onresize = () => {
    //   return (() => {
    //     this.$store.dispatch('screen/getEquipmentInfo')
    //     // this.screenWidth = document.body.clientWidth
    //     // this.screenHeight = document.body.clientHeight
    //   })()
    // }
    this.setFormTitleWidth()
    window.addEventListener('keydown', this.enterLogin)
  },

  destroyed() {
    window.removeEventListener('keydown', this.enterLogin, false)
  },

  methods: {
    checkIsRemeber() {
      if (getRemember()) {
        this.loginForm.username = getUsername()
        if (getPassword()) {
          this.loginForm.password = Base64.decode(getPassword())
        }
        this.isRemember = Boolean(getRemember())
        console.log(getUsername())
      }
    },
    usernameChange(v) {
      if (this.isRemember) {
        setUsername(this.loginForm.username)
      }
    },
    pwdChange(v) {
      if (this.isRemember) {
        setPassword(Base64.encode(this.loginForm.password))
      }
    },
    remember(v) {
      console.log(v)
      console.log(this.isRemember, 'remember')
      if (v) {
        setRemember(v)
        setUsername(this.loginForm.username)
        setPassword(Base64.encode(this.loginForm.password))
      } else {
        removePassword()
        removeUsername()
        removeRemember()
      }
    },
    // 设置登录表单title宽度
    setFormTitleWidth() {
      // 获取动态表单节点
      // const formDom = document.getElementsByClassName('v-form')
      // 获取动态表单Title节点
      // const formTitleDom = document.getElementsByClassName('loginTitle')
      // 定义 formTitle 宽度
      // formTitleDom[0].style.width = formDom[0].clientWidth + 'px'
    },

    formBtnCB(methodName, el) {
      this[methodName](el)
    },

    login() {
      const validate = this.$refs.form.validate()
      if (validate) {
        const password = md5(this.loginForm.password)
        // const password = this.loginForm.password
        this.$store
          .dispatch('user/login', { username: this.loginForm.username, password })
          .then(res => {
            this.$router.push('/')
          })
          .catch(err => {
            console.log('err', err)
          })
      }
    },

    enterLogin(e) {
      // 如果是回车则执行登录方法
      if (e.keyCode === 13) {
        this.login()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.loginContainer {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  & > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .loginTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    & {
      > div {
        position: absolute;
        right: 0px;
      }
      // div:first-child {
      // }
    }
    // ::v-deep .v-btn {
    //   position: absolute;
    //   right: 0px;
    // }
  }
}
</style>
